<template>
  <div ref='ec' :style="{height:height,width:width}"></div>
</template>

<script>
import echarts from "echarts";
export default {
  props: {
    width: {
      type: String,
      default: "0px"
    },
    height: {
      type: String,
      default: "0px"
    },
    data: {}
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.ec);
      this.chart.setOption(this.option);
    }
  },
  created() {
    const xData2 = (function() {
      const data = [];
      for (let i = 1; i < 31; i++) {
        data.push(i + "month");
      }
      return data;
    })();
    this.color = [
      "#0050E2",
      "#FF5227",
      "#FF9200",
      "#0780ED",
      "#00AFC3",
    ];
    this.option = {
      backgroundColor: "#fff",
      color: this.color,
      title: {
        text: "kw",
        left: 20,
        textStyle: {
          color: "#999",
          fontSize: "12"
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          textStyle: {
            color: "#fff"
          }
        }
      },
      grid: {
        left:50,
        right: 5,
        bottom: 80
      },
      legend: {
        itemWidth: 20,
        itemHeight: 10,
        right: 0,
        textStyle: {
          color: "#90979c",
          fontSize: "12"
        },
        data: this.data.map((item, index) => {
          return { name: item.name, icon: "roundRect" };
        })
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#999"
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap:0,  
            axisLabel: {
              formatter: function(value, index) {
                 return value.split("").join("\n");
              },
              rotate:-20,
              verticalAlign:'top'
            },        
          data: xData2
        }
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#e5e5e5",
              type: "dotted"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#999",
              width: 0
            }
          },
          axisTick: {
            show: false
          }
        }
      ],
      series: this.data.map((item, index) => {
        return {
          name: item.name,
          type: "line",
          smooth: true,
          stack: "total",
          showSymbol: false,
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: -5,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: this.color[index] // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            }
          },
          data: [1100, 1500, 1800, 1400, 1200,1100, 1500, 1800, 1400, 1200,1100, 1500, 1800, 1400, 1200,1100, 1500, 1800, 1400, 1200,1100, 1500, 1800, 1400, 1200,1100, 1500, 1800, 1400, 1200]
        };
      })
    };
  }
};
</script>
